<template>
  <div>
    <div class="tou">项目信息管理 <span>与我相关的项目</span></div>
    <div class="head">
      <div class="h-con">
        <div class="hc-head">
            <h4>与我相关的项目</h4>
            <i></i>
        </div>
        <div
          class="container"
          ref="container_left"
        ></div>
      </div>
      <div class="h-con">
        <div class="hc-head">
            <h4>项目到期情况统计</h4>
            <i></i>
        </div>
        <div
          class="container"
          ref="container_right"
        ></div>
      </div>

    </div>
    <div class="nick">
      <div class="head">
        <h3>安装一个大型设备</h3>
        <div>
            <el-dropdown>
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>更新进度</el-dropdown-item>
            <el-dropdown-item>查看历史</el-dropdown-item>
            <el-dropdown-item divided>批示操作</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>部门:总公司</li>
          <li>项目负责人:张三</li>
          <li>项目编号:A0001</li>
          <li>开始日期:2022-10-27</li>
          <li>已持续<span>10</span>天</li>
          <li>更新时间:<span>前天</span></li>
        </ul>
      </div>
      <div class="n-foot">
        <p>由张三创建</p>
      </div>
    </div>
    <div class="foot">
      <div class="head">
        <h3>冲压机的设备问题联系厂家修复</h3>
        <el-dropdown>
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>更新进度</el-dropdown-item>
            <el-dropdown-item>查看历史</el-dropdown-item>
            <el-dropdown-item divided>批示操作</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="content">
        <ul>
          <li>部门:总公司</li>
          <li>项目负责人:张三</li>
          <li>项目编号:A0002</li>
          <li>开始日期:2022-10-30</li>
          <li>已持续<span style="backgroundColor:red;">7</span>天</li>
          <li>更新时间:<span>昨天</span></li>
        </ul>
      </div>
      <div class="f-foot">
        <p>1.厂家正在查找问题中</p>
        <p>2.设备开始维修</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        backgroundColor: '#fff',
        title: {
          text: "与我相关的项目",
          subtext: "按照设备状态",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "与我相关的项目",
            type: "pie",
            radius: "50%",
            label: {
              formatter: "{b|{b}:}{c}{per|{d}%}",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 1, name: "我负责的" ,itemStyle:{normal:{color:"#c23531"},emphasis:{color:"#c23531"}}},
              { value: 1, name: "我参与的" ,itemStyle:{normal:{color:"#334b5c"},emphasis:{color:"#334b5c"}}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      options: {
        backgroundColor: '#fff',
        title: {
          text: "超期项目管理",
          subtext: "按照设备状态",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "超期项目管理",
            type: "pie",
            radius: "50%",
            label: {
              formatter: "{b|{b}:}{c}{per|{d}%}",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 2, name: "正常项目" ,itemStyle:{normal:{color:"#c23531"},emphasis:{color:"#c23531"}}},
              { value: 1, name: "超期项目" ,itemStyle:{normal:{color:"#334b5c"},emphasis:{color:"#334b5c"}}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.echart = echarts.init(this.$refs.container_left);
    this.echart.setOption(this.option);
    this.echart = echarts.init(this.$refs.container_right);
    this.echart.setOption(this.options);
  },
};
</script>
<style lang="scss" scoped>
.tou{
    font-size: 26px;
    padding: 10px;
    span{
        font-size: 14px;
        color: #909292;
    }
}
.head {
  display: flex;
  justify-content: space-evenly;

  .h-con {
    width: 591px;
    margin: 0 auto;
    overflow-x: auto;
    background-color: #fff;
    .hc-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
        border-top: 4px solid #3c8dbc;
        i{
            width: 10px;
            height: 0;
            border-top: 3px solid #97a0b3;
        }
    }
    .container {
      width: 100%;
      height: 300px;
    }
  }
}
.nick,
.foot {
  margin-top: 30px;
  background-color: #fff;
  border-top: 3px solid #eee;
  padding: 10px;
  .head {
    display: flex;
    justify-content: space-between;
  }
  .content {
    border-top: 1px solid #eee;
    padding-right: 80px;
    margin: 5px 0;
    padding-top: 10px;
  }
  ul {
    font-size: 12px;
    color: #6b7076;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      padding: 2px;
      font-size: 12px;
      background-color: #3c8dbc;
      color: #fff;
    }
  }
}
.foot{
    border-top: 5px solid #dd4b39;
}
</style>